<template>
  <div class="search-input-wrapper">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        @update:model-value="onUpdate"
      />
    </form>
  </div>
  <!-- <div class="search-content-wrapper" v-if="value && searchFilterList.length">
    <template v-for="item in searchFilterList" :key="item.id">
      <router-link :to="`/searchDetail/${item.id}`">
        <div class="search-content-item-box">
          <van-image
            :src="item.img"
            lazy-load
            icon-size="30.4vw"
            fit="fill"
            width="30.4vw"
            height="20.26vw"
          >
          </van-image>
          <div class="search-content-item-right-box">
            <div class="search-content-item-name">{{ item.name }}</div>
            <div class="search-content-item-price">{{ item.price }}</div>
          </div>
        </div>
      </router-link>
    </template>
  </div> -->
  <!-- {{searchFilterList}} -->
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    v-if="value && searchFilterList.length"
  >
    <div class="search-content-wrapper" >
      <van-cell v-for="item in list" :key="item.id">
        <router-link :to="`/searchDetail/${item.id}`">
          <div class="search-content-item-box">
            <van-image
              :src="item.img"
              lazy-load
              icon-size="30.4vw"
              fit="fill"
              width="30.4vw"
              height="20.26vw"
            >
            </van-image>
            <div class="search-content-item-right-box">
              <div class="search-content-item-name">{{ item.name }}</div>
              <div class="search-content-item-price">{{ item.price }}</div>
            </div>
          </div>
        </router-link>
      </van-cell>
    </div>
  </van-list>
</template>

<script>
import { ref, toRefs, computed, watch } from "vue";
import { Toast } from "vant";
import _ from "lodash";
// import _ from "lodash/core";
import "default-passive-events";
import { useSearchStore } from "@/store/search";

export default {
  setup(props, context) {
    const searchStore = useSearchStore();

    const value = ref("");
    const searchFilterList = computed(
      () =>
        searchStore.searchList.searchList &&
        searchStore.searchList.searchList.filter(
          (item, index) =>
            true === new RegExp("^.*" + value.value + ".*$").test(item.name)
        )
    );
    const timer = ref(0);
    const enterSearch = () => {
      // console.log(value.value);
      context.emit("changeQuery", value.value);
    };
    //防抖
    const debounce = (func, delay) => {
      clearTimeout(timer.value);
      timer.value = setTimeout(() => {
        func();
      }, delay);
    };
    const onUpdate = () => {
      debounce(enterSearch, 500);
    };
    const onSearch = () => {
      enterSearch();
    };

    const onCancel = () => Toast("取消");
    //List
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const count = ref(0);
    //根据搜索值的改变进行初始化
    watch(value, (value, prevValue) => {
      list.value = [];
      count.value = 0;
      finished.value = false;
      console.log(list.value, count.value, searchFilterList.value);
    });
    watch(searchFilterList, (value, prevValue) => {
      console.log("+1");
    });

    // const searchFilterList2 = computed(() => searchFilterList);
    const onLoad = () => {
      // console.log(searchFilterList, "---");
      // if (value.value) {
      setTimeout(() => {
        if (10 + count.value > searchFilterList.value.length) {
          for (let i = count.value; i < searchFilterList.value.length; i++) {
            // console.log(searchFilterList.slice(0,10));
            list.value.push(searchFilterList.value[i]);
          }
          loading.value = false;
          finished.value = true;
        } else {
          for (let i = count.value; i < 10 + count.value; i++) {
            // console.log(searchFilterList.slice(0,10));
            list.value.push(searchFilterList.value[i]);
          }
          count.value += 10;

          // 加载状态结束
          loading.value = false;

          // 数据全部加载完成
          // if (list.value.length >= searchFilterList.value.length) {
          //   finished.value = true;
          // }
        }
      }, 1000);
      // }
    };
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求

    return {
      searchFilterList,
      value,
      onSearch,
      onCancel,
      onUpdate,
      list,
      onLoad,
      loading,
      finished,
    };
  },
};
</script>

<style lang="scss">
.search-content-wrapper {
  .search-content-item-box {
    display: flex;
    /* height: 76vw/375*100; */
    padding: 0 14vw/375 * 100;
    .search-content-item-right-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 8vw/375 * 100;
    }
  }
}
</style>